/**
 * 图片轮播图
 * @author SPY
 * @date 2020/02/01
 */

import React from 'react';
import { Icon, message } from 'antd';
import Swiper from 'swiper';
import styles from './Slider.less';
import 'swiper/css/swiper.css';

const imgUrl = (index) => require(`./images/${index}.jpg`);
const imgName = [
    '2020开门红',
    '春节不打烊',
    '春节七天乐',
    '欢乐中国年',
    '全家团圆',
    '开工大吉',
    '瑞鼠迎春',
    '微信红包',
];

class SliderImagePage extends React.Component {

    state = {
        moveEnter: false,
    }

    componentDidMount() {
        const swiper = new Swiper('.swiper-container', {
            slidesPerView: 4,
            spaceBetween: 15,
            slidesPerGroup: 4,
            loop: true,
            loopFillGroupWithBlank: true,
            setWrapperSize: true,
            navigation: {
                nextEl: '#next',
                prevEl: '#prev',
            },
        });
    }

    onMouseEnter = () => {
        this.setState({ moveEnter: true });
    }

    onMouseLeave = () => {
        this.setState({ moveEnter: false });
    }

    handleClickImage = (name) => {
        message.success(`您点击了：${name}`);
    }


    render() {
        const { moveEnter } = this.state;
        const theme = moveEnter ? {
            theme: "twoTone",
        } : {};

        return (
            <div
                className={styles.swiperFather}
            >
                <div className="swiper-container" >
                    <div className="swiper-wrapper">
                        {
                            imgName.map((name, index) => {
                                return (
                                    <div
                                        className="swiper-slide"
                                        style={{ borderLeft: 0, cursor: 'pointer' }}
                                        onClick={() => this.handleClickImage(name)}
                                        key={index}
                                    >
                                        <div
                                            style={{
                                                position: 'absolute',
                                                left: '7%',
                                                top: '8%',
                                                fontSize: 22,
                                                color: '#fff',
                                            }}
                                        >
                                            {name}
                                        </div>
                                        <img
                                            alt='轮播图'
                                            src={imgUrl(index + 1)}
                                            style={{ borderRadius: '3%', width: '100%' }}
                                        />
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <div
                    className={styles.next}
                    id='next'
                    onMouseEnter={this.onMouseEnter}
                    onMouseLeave={this.onMouseLeave}
                >
                    <Icon
                        type="right-circle"
                        style={{ fontSize: '40px', color: '#ddd' }}
                        {...theme}
                    />
                </div>
                <div
                    className={styles.prev}
                    id='prev'
                    onMouseEnter={this.onMouseEnter}
                    onMouseLeave={this.onMouseLeave}
                >
                    <Icon
                        type="left-circle"
                        style={{ fontSize: '40px', color: '#ddd' }}
                        {...theme}
                    />
                </div>
            </div>
        );
    }
}

export default SliderImagePage;